.box1 {
  width: 400px;
  height: 400px;
  margin-top: 40px;
  margin-bottom: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-radius: 20px;
  box-sizing: border-box;
  border: 4px dashed rgb(48, 111, 230);
  .box2 {
    width: 180px;
    height: 230px;
    background: black;
    border-radius: 20px;
    animation: rotate2 2s linear infinite;
    transform-style: preserve-3d;
  }
}

// perspective 在 CSS 3D 变换中用于创建深度感，
//值越大 离自己的视线就越大 
// 它决定了用户与 3D 空间之间的距离。值越小，透视效果越强；值越大，3D 效果越柔和。

// translate3d
//x轴方向平移
//y轴方向平移
//z轴方向平移 值面对自己的立体方向

@keyframes rotate {
  from {
    transform: perspective(1000px) translate3d(0px, 0px, -100px) rotateY(0deg);
  }
  to {
    transform: perspective(1000px) translate3d(0px, 0px, -100px) rotateY(360deg);
  }
}

@keyframes rotate2 {
  0% {
    transform: perspective(1000px) translate3d(0px, 0px, -100px) rotateY(0deg);
  }

  33% {
    transform: perspective(1000px) translate3d(0px, 0px, 0px) rotateY(0deg);
  }

  66% {
    transform: perspective(1000px) translate3d(0px, 30px, -100px)
      rotateY(180deg);
  }

  100% {
    transform: perspective(1000px) translate3d(0px, 0px, -100px) rotateY(360deg);
  }
}
